<template>
    <div class="title flex-container">
        <div class="flex-item">
            <p>absolute + -margin</p>
            <div class="box-container box1">
                <div class="box-item item1">1</div>
            </div>
        </div>
        <div class="flex-item">
            <p>absolute + margin auto</p>
            <div class="box-container box2">
                <div class="box-item item2">2</div>
            </div>
        </div>
        <div class="flex-item">
            <p>absolute + calc</p>
            <div class="box-container box3">
                <div class="box-item item3">3</div>
            </div>
        </div>
        <div class="flex-item">
            <p>absolute + transform</p>
            <div class="box-container box4">
                <div class="box-item item4">4</div>
            </div>
        </div>
        <div class="flex-item">
            <p>lineHeight</p>
            <div class="box-container box5">
                <div class="box-item item5">5</div>
            </div>
        </div>
        <div class="flex-item">
            <p>table</p>
            <table class="box-container">
                <tbody>
                    <tr>
                        <td class="box6">
                            <div class="box-item item6">6</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="flex-item">
            <p>flex</p>
            <div class="box-container box7">
                <div class="box-item item7">7</div>
            </div>
        </div>
        <div class="flex-item">
            <p>grid</p>
            <div class="box-container box8">
                <div class="box-item item8">8</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style scoped>
.flex-container {
    height: 30rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
}
.flex-item {
    width: 2rem;
    flex: 1;
}
.flex-item:nth-of-type(7) {
    flex: 2
}
.title {
    font-size: .16rem;
    text-align: center;
    line-height: .5rem;
}
.box-container {
    width: 2rem;
    height: 2rem;
    background: #ffffff;
    border: 0.01rem solid #cccccc;
}
.box-item {
    width: 1rem;
    height: 1rem;
    background: #cccccc;
    border: 0.01rem solid #ffffff;
}
.box1 {
    position: relative;
}
.item1 {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -.5rem;
    margin-top: -.5rem;
}
.box2 {
    position: relative;
}
.item2 {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.box3 {
    position: relative;
}
.item3 {
    position: absolute;;
    top: calc(50% - .5rem);
    left: calc(50% - .5rem);
}
.box4 {
    position: relative;
}
.item4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box5 {
    line-height: 2rem;
}
.item5 {
    display: inline-block;
    vertical-align: middle;
}
.box6 {
    text-align: center;
}
.item6 {
    display: inline-block;
}
.box7 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box8 {
    display: grid;
}
.item8 {
    align-self: center;
    justify-self: center;
}
</style>
